<!-- 绑定设备 -->
<template>
  <j-modal :maskClosable='false' width='1100px' :visible='true' title='选择设备' okText='确定' cancelText='取消' @ok='handleOk'
           @cancel='handleCancel' :confirmLoading='btnLoading'>
    <div style='margin-top: 10px'>
      <pro-search :columns='columns' target='iot-card-bind-device' @search='handleSearch' type='simple' />
      <j-pro-table
        ref='bindDeviceRef'
        :alertRender='false'
        :columns='columns'
        :request='queryUnbounded'
        model='TABLE'
        :defaultParams="{
                    pageSize: 10,
                    sorts: [{ name: 'createTime', order: 'desc' }],
                }"
        :pagination="{
                    showSizeChanger: true,
                    pageSizeOptions: ['10', '20', '50', '100'],
                }"
        :rowSelection="{
          type: 'radio',
          selectedRowKeys: _selectedRowKeys,
          onSelect: onSelectChange,
      }"
        @cancelSelect='cancelSelect'
        :params='params'
      >
        <template #registryTime='slotProps'>
          {{
            slotProps.registryTime
              ? moment(slotProps.registryTime).format(
                'YYYY-MM-DD HH:mm:ss'
              )
              : ''
          }}
        </template>
        <template #state='slotProps'>
          <j-badge :text='slotProps.state.text' :status='statusMap.get(slotProps.state.value)' />
        </template>
      </j-pro-table>
    </div>
  </j-modal>
</template>

<script setup lang='ts'>
import { queryUnbounded, bind } from '@/api/iot-card/cardManagement'
import moment from 'moment'
import { message } from 'jetlinks-ui-components'

const emit = defineEmits(['change'])

const props = defineProps({
  cardId: {
    type: String
  }
})

const bindDeviceRef = ref<Record<string, any>>({})
const params = ref<Record<string, any>>({})
const _selectedRowKeys = ref<string[]>([])
const btnLoading = ref<boolean>(false)

const statusMap = new Map()
statusMap.set('online', 'processing')
statusMap.set('offline', 'error')
statusMap.set('notActive', 'warning')

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    ellipsis: true,
    fixed: 'left',
    search: {
      type: 'string'
    }
  },
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
    ellipsis: true,
    search: {
      type: 'string'
    }
  },
  {
    title: '注册时间',
    dataIndex: 'registryTime',
    key: 'registryTime',
    scopedSlots: true,
    search: {
      type: 'date'
    }
    // sorter: true,
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    scopedSlots: true,
    search: {
      type: 'select',
      options: [
        { label: '禁用', value: 'notActive' },
        { label: '离线', value: 'offline' },
        { label: '在线', value: 'online' }
      ]
    }
    // filterMultiple: false,
  }
]

const handleSearch = (e: any) => {
  params.value = e
}

const onSelectChange = (record: any) => {
  _selectedRowKeys.value = [record.id]
}

const cancelSelect = () => {
  _selectedRowKeys.value = []
}

const handleOk = () => {
  btnLoading.value = true
  bind(props.cardId, _selectedRowKeys.value[0])
    .then((resp: any) => {
      if (resp.status === 200) {
        message.success('操作成功')
        emit('change', true)
      }
    })
    .finally(() => {
      btnLoading.value = false
    })
}

const handleCancel = () => {
  emit('change', false)
}
</script>

<style scoped lang='less'></style>
